<template>
  <div id="OfferAmajor" v-loading="loading">
    <el-dialog
      v-model="dialogVisible"
      :title="collegeName1"
      width="900"
      :before-close="handleClose"
    >
      <el-table
        :data="tableData"
        style="width: 100%"
        height="500"
        v-loading="loading"
      >
        <el-table-column prop="collegeName" label="院校" />
        <el-table-column prop="professionName" label="专业"> </el-table-column>
        <el-table-column prop="eduLevel" label="专业层次">
          <template #default="scope">
            {{ scope.row.eduLevel == 'ben' ? '本科' : '专科' }}
          </template>
        </el-table-column>
        <el-table-column prop="direction" label="招考方向">
          <template #default="scope">
            {{ scope.row.direction ? scope.row.direction : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="professions" label="包含专业">
          <template #default="scope">
            {{ scope.row.professions || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="firstRequired" label="科目要求">
          <template #default="scope">
            {{ scope.row.rule !== '0' ? scope.row.firstRequired : '--' || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="匹配状态">
          <template #header>
            <el-select
              v-model="value"
              placeholder="Select"
              size="small"
              style="width: 110px"
              @change="handleSelectChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
          <template #default="scope">
            {{ scope.row.isMatch ? '匹配' : '不匹配' }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  getSelectSearchSchoolMajor,
  getSelectSearchMajor,
} from '@/api/selectSubject/subject';
const value = ref('3');
const dialogVisible = ref(false);
const tableData = ref([]);
const loading = ref(false);
const collegeName1 = ref('');
const tableType = ref('0');
const options = [
  {
    value: '3',
    label: '匹配状态',
  },
  {
    value: '1',
    label: '匹配',
  },
  {
    value: '0',
    label: '不匹配',
  },
];
const copyQueryData = ref([]);
// 按学校搜索
const fetchSelectSearchSchoolMajor = (query) => {
  loading.value = true;
  getSelectSearchSchoolMajor(query)
    .then((res) => {
      if (res.data.code == 20000) {
        if (isClassMatching.value == '1') {
          tableData.value = res.data.data.filter((item) => item.isMatch == 1);
        } else if (isClassMatching.value == '0') {
          tableData.value = res.data.data.filter((item) => item.isMatch == 0);
        } else if (isClassMatching.value == '3') {
          tableData.value = res.data.data;
        }
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};

// 按专业搜索
const fetchSelectSearchMajor = (query) => {
  loading.value = true;
  getSelectSearchMajor(query)
    .then((res) => {
      if (res.data.code == 20000) {
        if (isClassMatching.value == '1') {
          tableData.value = res.data.data.filter((item) => item.isMatch == 1);
        } else if (isClassMatching.value == '0') {
          tableData.value = res.data.data.filter((item) => item.isMatch == 0);
        } else if (isClassMatching.value == '3') {
          tableData.value = res.data.data;
        }
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
const handleClose = (done) => {
  dialogVisible.value = false;
  done();
};
const handleOpenDialogVisible = (queryData, collegeName, type) => {
  copyQueryData.value = queryData;
  tableType.value = type;
  if (type == '2') {
    fetchSelectSearchSchoolMajor(queryData);
  } else {
    fetchSelectSearchMajor(queryData);
  }
  collegeName1.value = collegeName;
  dialogVisible.value = true;
};
const isClassMatching = ref('3');

const handleSelectChange = (val) => {
  isClassMatching.value = val;
  if (tableType.value == '2') {
    fetchSelectSearchSchoolMajor(copyQueryData.value);
  } else {
    fetchSelectSearchMajor(copyQueryData.value);
  }
};
const handleLoading = (val) => {
  loading.value = val;
};
defineExpose({
  handleOpenDialogVisible,
  handleLoading,
});
</script>
